<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
		<style>
			.fixed-content {
				position: fixed;
				width: 100%;
				top: 0;
				z-index: 1;
			}
			#header {
				background-color: #498af7;
			}
			#header a {
				color: #fff;
			}
			#header h1 {
				color: #fff;
			}
			.input-container {
				padding: 3px;
				background-color: #fff;
				margin-top: 44px;
			}
			
			/* 如果要去掉input的margin-bottom值,还需要调整.mui-search:before的位置 */
			.input-container input {
				margin-bottom: 0;
			}
			.mui-search:before {
				margin-top: -10px;
			}
			
			.mui-content {
				width: 100%;
				padding-top: 84px;
				overflow-y: auto;
			}
			
			.display-container {
				float: left;
				text-align: center;
			}
			.engineer-display {
				display: block;
				width: 40px;
				height: 40px;
				background-size: contain;
				border-radius: 20px;
				margin-top: 3px;
			}
			.state-container {
				float: right;
			}
			.engineer-info {
				color: #666;
				font-size: 15px;
				list-style: none;
				padding-left: 55px;
			}
			.engineer-state {
				display: inline-block;
				border-width: 1px;
				border-style: solid;
				border-radius: 9px;
				line-height: 18px;
				height: 18px;
				font-size: 14px;
				padding: 0 5px;
				vertical-align: top;
			}
			.idle-state {
				color: rgb(91, 217, 81);
				border-color: rgb(91, 217, 81);
			}
			.busy-state {
				color: rgb(247, 66, 33);
				border-color: rgb(247, 66, 33);
			}
			.mui-badge {
				vertical-align: top;
				margin-left: 5px;
			}
		</style>
	</head>
	<body>
		<div class="fixed-content">
			<header class="mui-bar mui-bar-nav" id="header">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">工程师</h1>
			</header>
			<div class="input-container">
				<div class="mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear" placeholder="">
				</div>
			</div>
		</div>
		<div class="mui-content">
			<div id="engineer-list">
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/chooseEngineer.js"></script>
	</body>
</html>
